<template>
  <div class="wrap">
    <x-header title="点位图谱"></x-header>
    <v-tree ref='vtree' :data="nodes" :tpl="tpl" :halfcheck="false" @async-load-nodes="asyncLoad2"/>
  </div>
</template>

<script>
import VTree from 'vue-tree-halower'
import { GetRelationshipMap } from '@/api/netPoint'
import '@/styles/halower-tree.min.css'
import { XHeader } from 'vux'
export default {
  components: {
    VTree,
    XHeader
  },
  data() {
    return {
      nodes: [{
        title: '用户点位列表',
        expanded: false,
        async: true
      }],
      q: {
        startDate: '',
        endDate: '',
        userName: '',
        id: 0
      }
    }
  },
  methods: {
    getList() {
      var _this = this
      _this.getRelationshipMapData(x => {
        _this.nodes = x
      })
    },
    getRelationshipMapData(cb) {
      var _this = this
      GetRelationshipMap(this.q).then(response => {
        var a = response.data.map(x => {
          return {
            expanded: false,
            async: true,
            data: Object.assign(x, { creationTime: _this.$moment(x.creationTime) })
          }
        })
        cb(a)
      })
    },
    async asyncLoad2(node) {
      var _this = this
      _this.q.id = node.data.id
      this.$set(node, 'loading', true)
      const pro = await new Promise((resolve, reject) => {
        _this.getRelationshipMapData(x => {
          resolve(x)
        })
      })
      pro.forEach((el) => {
        if (!node.hasOwnProperty('children')) {
          this.$set(node, 'children', [])
        }
        node.children.push(el)
      })
      this.$set(node, 'loading', false)
    },
    tpl(node, ctx) {
      if (node.title) {
        return <span class='node-title' domPropsInnerHTML={node.title} ></span>
      }
      return <span>
        <span class="span" size='mini'>登陆账号：{node.data.userName}</span>
        <span class='span success'>姓名：{node.data.name}</span>
        <span class='span warning'>会员数：{node.data.nodeCount}</span>
        <span class='span info'>创建时间：{node.data.creationTime}</span>
      </span>
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.wrap{
  height: 100%;
  .vux-header{
    z-index: 2;
  }
  button.weui-btn{
    width: 80%;
    margin: 30px auto;
  }
}
.span{
  display: inline-block;
  // width: 15%;
  text-align: center;
  padding: 0 10px;
  font-size: 12px;
  color: #409eff;
  border-radius: 4px;
  border: 1px solid rgba(64,158,255,.2);
  background-color: rgba(64,158,255,.1);
  white-space: nowrap;
}
.info{
  background-color: rgba(144,147,153,.1);
  border-color: rgba(144,147,153,.2);
  color: #909399;
}
.success{
  background-color: rgba(103,194,58,.1);
  border-color: rgba(103,194,58,.2);
  color: #67c23a;
}
.danger{
  background-color: hsla(0,87%,69%,.1);
  border-color: hsla(0,87%,69%,.2);
  color: #f56c6c;
}
.warning{
  background-color: rgba(230,162,60,.1);
  border-color: rgba(230,162,60,.2);
  color: #e6a23c;
}
</style>
